<script lang="ts" setup>
import { examDetailsApi } from '@/service/my/index'

const examDetailsData: any = ref()

const props = defineProps({
  id: String,
})

onLoad(() => {})

onMounted(() => {
  getExamDetails()
})

const getExamDetails = async () => {
  try {
    console.info('getExamDetails-------------->' + props.id)
    const res: any = await examDetailsApi(props.id)
    if (res?.code === 200) {
      examDetailsData.value = res.data
    } else {
      console.error('')
    }
  } catch (error) {
    uni.showToast({
      title: '获取课程详情失败',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="info_container">
    <view class="exam_title_container">
      <image src="@/static/images/my/exam_icon.png" style="width: 40rpx; height: 40rpx" />
      <text class="exam_title">{{ examDetailsData.title }}</text>
    </view>
    <view class="exam_info">
      <view class="exam_info_item">
        <view class="exam_time">考试时间:&nbsp;&nbsp;</view>
        <view class="exam_time">
          {{ examDetailsData.startTime }}至{{ examDetailsData.endTime }}
        </view>
      </view>
      <view class="exam_info_item">
        <view class="exam_time">考试时长:&nbsp;&nbsp;</view>
        <view class="exam_time">{{ examDetailsData.examDuration }}分钟</view>
      </view>
      <view class="exam_info_item">
        <view class="exam_time">总分:&nbsp;&nbsp;</view>
        <view class="exam_time">
          {{ examDetailsData.totalScore !== null ? examDetailsData.totalScore : '--' }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.info_container {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  margin: 25rpx;
  background-color: white;
  border-radius: 10rpx;
}

.exam_info {
  display: flex;
  flex-direction: column;
  padding: 15rpx;
  /* margin: 5rpx; */
  margin-top: 15rpx;
  background-color: #f7f7f7;
  border-radius: 10rpx;
}

.exam_info_item {
  display: flex;
  flex-direction: row;
}

.exam_title {
  margin-left: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.exam_time {
  margin-top: 15rpx;
  font-size: medium;
  font-size: 24rpx;
  color: #999999;
}
</style>
